<template>
    <div class="transfer-account page">
        <div class="con">
            <div class="user" v-if="user">
                <img :src="user.avatar" alt="" class="avatar">
                <span class="name">{{user.name}}（{{user.code}})</span>
            </div>
            <div class="inputSquare">
                <div class="item">
                    <div class="title">开户人:</div>
                    <cube-input v-model="accName" placeholder="例：张三"></cube-input>
                </div>
                <div class="item">
                    <div class="title">开户银行:</div>
                    <cube-input v-model="bank" placeholder="例：中国银行"></cube-input>
                </div>
                <div class="item">
                    <div class="title">银行分行:</div>
                    <cube-input v-model="accBranch" placeholder="例：长沙分行"></cube-input>
                </div>
                <div class="item">
                    <div class="title">银行卡号:</div>
                    <cube-input v-model="number"></cube-input>
                </div>
            </div>

            <div class="form">
                <div class="form-con ">
                    <span class="title">提现金额</span>
                    <div class="inputs border-bottom-1px">
                        <span class="icon">￥</span>
                        <input ref="in" @keyup="changeValue" class="inp" v-model="amount" type="number">
                    </div>
                    <!--                    <span @click="showAlert" class="remark">添加转账说明</span>-->
                </div>

            </div>
            <div class="btn" @click="deposit">立即提现</div>
        </div>
    </div>
</template>

<script>
    import {clearNoNum} from "../../common/js/num";
    import {showAlter, showError, showInfo} from "../../toast";
    import {info} from "../../api/user";
    import * as Dialog from '@/dialog'
    import {deposit} from '@/api/account'
    import {showCorrect} from "../../dialog";

    export default {
        name: "account",
        created() {
            info().then(res => {
                this.user = res.data
            })
        },
        data() {
            return {
                payConfig: null,
                user: null,
                amount:null, //申请金额
                accName:null, //开户人
                bank:null, //开户银行
                accBranch:null, //银行分行
                number:null , //银行卡号
            }
        },
        methods: {
            changeValue() {
                this.payConfig =null//重置
                this.amount = clearNoNum(this.amount)
            },
            deposit(){
                if (!this.amount){
                    showError('请输入提现金额')
                    return
                }
                if (!this.accName){
                    showError('请输入开户人')
                    return
                }
                if (!this.bank){
                    showError('请输入开户银行')
                    return
                }
                if (!this.accBranch){
                    showError('请输入银行分行')
                    return
                }
                if (!this.number){
                    showError('请输入银行卡号')
                    return
                }
                let data={
                    amount:this.amount,
                    accName:this.accName,
                    bank:this.bank,
                    accBranch:this.accBranch,
                    number:this.number
                }
                deposit(data).then(res=>{
                    if (res.code==10000){
                        showCorrect('申请成功')
                        this.$router.push({
                            path:'/my'
                        })
                    }
                })
            }
        }
    }
</script>

<style scoped lang="stylus">
    .transfer-account
        background url("~@/assets/hbg.png") no-repeat #FFFFFF
        background-size 100% auto
        z-index 2
        height 100%

        .con
            padding 0px 10px 0

        .user
            height 95px
            display flex
            justify-content center
            align-items center
            flex-direction column

            .avatar
                width 40px
                height 40px
                border-radius 5px

            .name
                margin-top 9px
                font-size: 14px;
                font-family: PingFang SC;
                color: rgba(78, 61, 7, 1);
        .inputSquare
            margin-top 20px
            .item
                margin-bottom 5px
                .cube-input
                    border 1px solid #fc9153
                .title
                    font-size: 12px;
                    font-family: PingFang SC;
                    color: rgba(78, 61, 7, 1);
                    margin-bottom 3px


        .form
            overflow hidden
            padding 20px 30px
            margin-top 10px
            font-size 0
            .form-con
                .title
                    font-size: 12px;
                    font-family: PingFang SC;
                    color: rgba(78, 61, 7, 1);

                .inputs
                    border-bottom-color #DCDCDC
                    height 70px
                    display flex
                    align-items center
                    margin-bottom 15px

                    .icon
                        font-size: 35px;
                        font-family: PingFang SC;
                        font-weight: 600;
                        color: rgba(78, 61, 7, 1);

                    .inp
                        outline none
                        border none
                        height 35px
                        font-size 24px

                .remark
                    font-size: 12px;
                    font-family: PingFang SC;
                    color: rgba(247, 137, 94, 1);

        .btn
            height 44px
            background: rgba(247, 137, 94, 1);
            border-radius: 7px;
            text-align center
            color white
            font-size 14px
            line-height 44px


</style>